<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>成员管理</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/knowledge.css">
</head>
<body>
<div class="container mt-4">
    <div class="row mb-3">
        <div class="col-md-6">
            <h2>知识库成员</h2>
        </div>
        <div class="col-md-6 text-right">
            <button class="btn btn-primary" data-toggle="modal" data-target="#addMemberModal">
                添加成员
            </button>
        </div>
    </div>

    <table class="table table-hover">
        <thead>
        <tr>
            <th>成员</th>
            <th>角色</th>
            <th>加入时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="memberList">
        <!-- 动态加载成员列表 -->
        </tbody>
    </table>
</div>

<!-- 添加成员模态框 -->
<div class="modal fade" id="addMemberModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加成员</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addMemberForm">
                    <input type="hidden" id="knowledgeBaseId" value="">
                    <div class="form-group">
                        <label>用户名或邮箱</label>
                        <input type="text" class="form-control" id="userIdentifier" required>
                    </div>
                    <div class="form-group">
                        <label>角色</label>
                        <select class="form-control" id="memberRole">
                            <option value="3">成员</option>
                            <option value="2">管理员</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addMember()">添加</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/knowledge-member.js"></script>
<script>
    // 从URL获取知识库ID
    const urlParams = new URLSearchParams(window.location.search);
    const knowledgeBaseId = urlParams.get('id');

    $(document).ready(function() {
        if (knowledgeBaseId) {
            $('#knowledgeBaseId').val(knowledgeBaseId);
            loadMembers(knowledgeBaseId);
        }
    });
</script>
</body>
</html>